<template>
  <div>
    <div class="herdertop">
      <img src="../../assets/top.png" alt="" class="topImg" />

      <el-breadcrumb separator="/">
        <el-breadcrumb-item>活动管理</el-breadcrumb-item>

        <el-breadcrumb-item>活动配置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="center" style="padding-top: 0px">
      <div class="hander">活动配置</div>

      <div
        class="orderList"
        v-loading="isLoading"
        element-loading-text="优惠券发送中"
        element-loading-spinner="el-icon-loading"
      >
        <div class="entirety">
          <p class="basic">活动信息配置</p>

          <div class="overall">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="140px"
              class="demo-ruleForm"
            >
              <el-row>
                <el-form-item
                  label="活动名称"
                  prop="activityName"
                  class="my_form_item_style"
                  style="margin-bottom: 10px"
                  placeholder="输入活动名称"
                >
                  <el-input
                    v-model="ruleForm.activityName"
                    style="width: 250px"
                  ></el-input>
                </el-form-item>

                <div
                  v-if="activityNo"
                  style="width: 450px; position: absolute; right: -5%"
                >
                  <el-form-item
                    label="活动ID"
                    prop="activityNo"
                    class="my_form_item_style"
                    style="margin-bottom: 10px"
                  >
                    <el-input
                      disabled
                      v-model="ruleForm.activityNo"
                      style="width: 250px"
                    ></el-input>
                  </el-form-item>
                </div>
                <div
                  v-if="activityNo"
                  style="width: 40px; position: absolute; right: -5%"
                >
                  <el-button
                    style="background-color:#fd804c;color: #fff;"
                    size="medium"
                    @click="copy(ruleForm.activityNo)"
                    class="copy tag"
                    >复制ID</el-button
                  >
                </div>
              </el-row>

              <el-form-item
                label="活动时间"
                required
                style="margin-bottom: 10px"
              >
                <el-col :span="11">
                  <el-form-item prop="startTime">
                    <el-date-picker
                      v-model="ruleForm.startTime"
                      type="datetime"
                      placeholder="活动开始时间"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>

                <el-col :span="2" class="bag"> ~ </el-col>

                <el-col :span="11">
                  <el-form-item prop="endTime">
                    <el-date-picker
                      placeholder="活动结束时间"
                      v-model="ruleForm.endTime"
                      type="datetime"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-form-item>

              <el-form-item
                label="领取次数"
                prop="receiveLimit"
                style="margin-bottom: 10px"
              >
                <el-input-number
                  v-model="ruleForm.receiveLimit"
                  :disabled="activityBlo"
                  controls-position="right"
                  placeholder="输入领取次数"
                  @change="handleChange"
                  :min="1"
                ></el-input-number>
              </el-form-item>

              <el-form-item
                label="背景颜色"
                prop="bgColor"
                style="margin-bottom: 10px"
              >
                <el-input
                  v-model="ruleForm.bgColor"
                  type="color"
                  style="width: 120px"
                ></el-input>

                <!-- <span style="color: #999999"

                  >示例：#3c3c3c,字母不区分大小写</span

                > -->
              </el-form-item>

              <el-form-item
                label="活动图片:"
                prop="bgImage"
                style="margin-bottom: 10px"
              >
                <el-upload
                  class="avatar-uploader"
                  action="https://api.xstarlife.com/systemadmin/materialLibrary/upload/materialLibraryMultiFileUpload?uploadScene=activity"
                  :on-success="handleAvatarSuccess"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload"
                >
                  <img
                    v-if="ruleForm.bgImage"
                    :src="ruleForm.bgImage"
                    class="avatar"
                  />

                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>

              <el-form-item
                label="按钮图片(未领取): "
                class="beforeAvatar"
                prop="buttonDisabledImage"
                style="margin-bottom: 10px;"
              >
                <el-upload
                  class="avatar-uploader buttonimg"
                  :show-file-list="false"
                  action="https://api.xstarlife.com/systemadmin/materialLibrary/upload/materialLibraryMultiFileUpload?uploadScene=activity"
                  :on-success="handleAvatarSuccess1"
                  :before-upload="beforeAvatarUpload"
                >
                  <img
                    v-if="ruleForm.buttonDisabledImage"
                    :src="ruleForm.buttonDisabledImage"
                    class="avatar"
                  />

                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>

              <el-form-item
                label="按钮图片(领取):"
                prop="buttonImage"
                style="margin-bottom: 10px"
              >
                <el-upload
                  class="avatar-uploader buttonimg"
                  action="https://api.xstarlife.com/systemadmin/materialLibrary/upload/materialLibraryMultiFileUpload?uploadScene=activity"
                  :on-success="handleAvatarSuccess2"
                  :before-upload="beforeAvatarUpload"
                  :show-file-list="false"
                >
                  <img
                    v-if="ruleForm.buttonImage"
                    :src="ruleForm.buttonImage"
                    class="avatar"
                  />

                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <div
                  style="width: 450px; position: absolute; left: 18%;top:1px"
                >
                  <el-form-item
                    label="活动链接"
                    class="my_form_item_style"
                    style="margin-bottom: 10px"
                    placeholder="输入活动链接"
                  >
                    <el-input
                      v-model="ruleForm.activityUrl"
                      style="width: 250px"
                    ></el-input>
                  </el-form-item>
                </div>
              </el-form-item>

              <el-form-item
                label="说明图片:"
                prop="explainImage"
                style="margin-bottom: 10px"
              >
                <el-upload
                  class="avatar-uploader"
                  action="https://api.xstarlife.com/systemadmin/materialLibrary/upload/materialLibraryMultiFileUpload?uploadScene=activity"
                  :on-success="handleAvatarSuccess3"
                  :before-upload="beforeAvatarUpload"
                  :show-file-list="false"
                >
                  <img
                    v-if="ruleForm.explainImage"
                    :src="ruleForm.explainImage"
                    class="avatar"
                  />

                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-form>
          </div>

          <div class="cou"></div>
        </div>

        <div class="entirety">
          <p class="basic">渠道活动码</p>

          <div style="display:flex;justify-content: space-between;">
            <el-button
              slot="reference"
              class="but"
              @click="isDialog('新增渠道名称')"
              >+新增渠道
            </el-button>

            <!-- <el-form

              :inline="true"

              :model="formInline"

              class="demo-form-inline"

            >

              <el-form-item label="活动名称">

                <el-select v-model="formInline.region" placeholder="活动名称">

                  <el-option label="名称一" value="shanghai"></el-option>

                  <el-option label="名称二" value="beijing"></el-option>

                </el-select>

              </el-form-item>

              <el-form-item>

                <el-button                   style="background-color:#fd804c;color: #fff;" @click="isBatchAdd">确定</el-button>

              </el-form-item>

            </el-form> -->
          </div>

          <el-dialog :title="msg" :visible.sync="isChannelEject" width="50%">
            <div class="result-container">
              <div style="margin-top: 20px; text-align: center">
                <el-form :model="ChannelCogin" label-width="80px">
                  <el-form-item label="渠道名称" prop="channelName">
                    <el-input
                      type="text"
                      placeholder="请输入渠道名称"
                      v-model="ChannelCogin.channelName"
                      maxlength="10"
                      show-word-limit
                    ></el-input>
                  </el-form-item>

                  <el-form-item>
                    <el-button @click="isChannelEject = false" class="but"
                      >取消
                    </el-button>

                    <el-button
                      style="background-color:#fd804c;color: #fff;"
                      @click="onSubmitChannel"
                      >确定
                    </el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>

            <!-- <CouponList /> -->
          </el-dialog>

          <div v-if="activityBlo">
            <el-table
              style="width: 100%"
              max-height="250"
              :data="channelRefList"
            >
              <el-table-column
                label="渠道名称"
                prop="channelName"
              ></el-table-column>

              <el-table-column label="渠道标识" prop="channelCode">
                <template slot-scope="scope">
                  {{ scope.row.channelCode }}
                </template>
              </el-table-column>

              <el-table-column label="活动码" prop="activePath">
                <template slot-scope="scope">
                  <img
                    :src="'data:image/jpg;base64,' + scope.row.activePath"
                    alt=""
                    style="border: 0px solid #ddd; width: 50%"
                    id="ringoImage"
                  />
                </template>
              </el-table-column>

              <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                  <a
                    v-if="scope.row.activePath"
                    style="text-decoration: none; color:#46a0fc;"
                    download="二维码.jpg"
                    :href="'data:image/jpg;base64,' + scope.row.activePath"
                    >下载小程序二维码
                  </a>

                  <a
                    v-else
                    style="text-decoration: none; color:#46a0fc;"
                    @click="isDialog('修改渠道名称', scope.row)"
                    >修改名称
                  </a>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div v-else>
            <el-table
              style="width: 100%"
              max-height="250"
              :data="channelRefList"
            >
              <el-table-column
                label="渠道名称"
                prop="channelName"
              ></el-table-column>

              <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                  <el-button
                    @click="isDialog('修改渠道名称', scope.row, scope.$index)"
                    type="text"
                    size="small"
                  >
                    修改名称
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <div class="entirety">
          <p class="basic">配置优惠券</p>

          <el-button slot="reference" class="but" @click="isClick"
            >选择已有优惠券
          </el-button>

          <el-dialog
            title="配置优惠券"
            :visible.sync="dialogVisible"
            width="50%"
          >
            <div class="result-container">
              <el-table
                :data="producList"
                max-height="250"
                :row-key="
                  row => {
                    return row.id;
                  }
                "
                ref="buyerTable"
                border
                @selection-change="handleSelectionChange"
              >
                <el-table-column
                  type="selection"
                  :reserve-selection="true"
                  width="55"
                >
                </el-table-column>

                <el-table-column
                  label="优惠券名称"
                  prop="couponTitle"
                ></el-table-column>

                <el-table-column label="使用条件" prop="useConditions">
                  <template slot-scope="scope">
                    <div>
                      {{
                        scope.row.useConditions == 1
                          ? "固定模式"
                          : "循环叠加模式"
                      }}
                    </div>
                  </template>
                </el-table-column>

                <el-table-column
                  label="发放数量"
                  prop="sendQuantity"
                ></el-table-column>

                <el-table-column label="状态" prop="validStatus">
                  <template>
                    <div>
                      {{ "有效" }}
                    </div>
                  </template>
                </el-table-column>

                <el-table-column label="有效期" prop="time" width="150">
                  <template slot-scope="scope">
                    <div>
                      {{ scope.row.effectiveStartTime }}-

                      {{ scope.row.effectiveEndTime }}
                    </div>
                  </template>
                </el-table-column>
              </el-table>

              <div style="margin-top: 20px; text-align: center">
                <el-button
                  slot="reference"
                  @click="dialogVisible = false"
                  class="but"
                  >取消
                </el-button>

                <el-button
                  style="background-color:#fd804c;color: #fff;"
                  @click="onSubmitData()"
                  :disabled="len == 0 ? true : false"
                  >确定
                </el-button>
              </div>
            </div>

            <el-pagination
              class="page"
              @size-change="sizeChangeHandle"
              @current-change="currentChangeHandle"
              :current-page="pageIndex"
              :page-size="pageSize"
              :total="total"
            >
            </el-pagination>

            <!-- <CouponList /> -->
          </el-dialog>

          <el-table style="width: 100%" max-height="250" :data="ArrData">
            <el-table-column
              label="优惠券名称"
              prop="couponTitle"
            ></el-table-column>

            <el-table-column label="使用条件" prop="useConditions">
              <template slot-scope="scope">
                <div>
                  {{
                    scope.row.useConditions == 1
                      ? "固定模式"
                      : scope.row.useConditions == 2
                      ? "循环叠加模式"
                      : ""
                  }}
                </div>
              </template>
            </el-table-column>

            <el-table-column
              label="发放数量"
              prop="sendQuantity"
            ></el-table-column>

            <el-table-column label="状态" prop="validStatus">
              <template>
                <div>
                  {{ "有效" }}
                </div>
              </template>
            </el-table-column>

            <el-table-column label="有效期" prop="time" width="150">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.effectiveStartTime }}-

                  {{ scope.row.effectiveEndTime }}
                </div>
              </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="deleteRow(scope.row.couponNo)"
                  type="text"
                  size="small"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <div style="margin-top: 20px; text-align: center">
            <el-button slot="reference" @click="isCancel" class="but"
              >取消
            </el-button>

            <el-button
              style="background-color:#fd804c;color: #fff;"
              @click="isRelease('ruleForm')"
              >发布
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";

import Clipboard from "clipboard";

import { v4 as uuidv4 } from "uuid";

import configCouponListVue from "../issueStamps/configCouponList.vue";

export default {
  name: "homeActivityInfo",

  inject: ["reload"],

  data() {
    return {
      hideUpload: false,

      imgStr:
        "77u/PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjE1MHB4IiBoZWlnaHQ9IjE1MHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAxIC03NTUgLTE1MSApIj4NCiAgICA8cGF0aCBkPSJNIDI4IDEwOSAgTCA0MSAxMDkgIEwgNDEgMTIyICBMIDI4IDEyMiAgTCAyOCAxMDkgIFogTSAyOCAyOCAgTCA0MSAyOCAgTCA0MSA0MSAgTCAyOCA0MSAgTCAyOCAyOCAgWiBNIDEwOSAyOCAgTCAxMjIgMjggIEwgMTIyIDQxICBMIDEwOSA0MSAgTCAxMDkgMjggIFogTSAxNCA5NSAgTCAxNCAxMzYgIEwgNTUgMTM2ICBMIDU1IDk1ICBMIDE0IDk1ICBaIE0gMTQgMTQgIEwgMTQgNTUgIEwgNTUgNTUgIEwgNTUgMTQgIEwgMTQgMTQgIFogTSA5NSAxNCAgTCA5NSA1NSAgTCAxMzYgNTUgIEwgMTM2IDE0ICBMIDk1IDE0ICBaIE0gMCA4MSAgTCA2OSA4MSAgTCA2OSAxNTAgIEwgMCAxNTAgIEwgMCA4MSAgWiBNIDEwOSAxMzYgIEwgMTIyIDEzNiAgTCAxMjIgMTUwICBMIDEwOSAxNTAgIEwgMTA5IDEzNiAgWiBNIDEzNiAxMzYgIEwgMTUwIDEzNiAgTCAxNTAgMTUwICBMIDEzNiAxNTAgIEwgMTM2IDEzNiAgWiBNIDEzNiA4MSAgTCAxNTAgODEgIEwgMTUwIDEyMiAgTCAxMDkgMTIyICBMIDEwOSAxMDkgIEwgOTUgMTA5ICBMIDk1IDE1MCAgTCA4MSAxNTAgIEwgODEgODEgIEwgMTIyIDgxICBMIDEyMiA5NSAgTCAxMzYgOTUgIEwgMTM2IDgxICBaIE0gMCAwICBMIDY5IDAgIEwgNjkgNjkgIEwgMCA2OSAgTCAwIDAgIFogTSA4MSAwICBMIDE1MCAwICBMIDE1MCA2OSAgTCA4MSA2OSAgTCA4MSAwICBaICIgZmlsbC1ydWxlPSJub256ZXJvIiBmaWxsPSIjMDAwMDAwIiBzdHJva2U9Im5vbmUiIHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIDEgNzU1IDE1MSApIiAvPg0KICA8L2c+DQo8L3N2Zz4=",

      msg: "",

      IconLen: null,

      code: "12345678",

      activityData: {},

      formInline: {
        region: ""
      },

      couponRefList: [],

      ChannelCogin: {
        channelName: ""
      },

      ruleForm: {
        activityNo: "",

        activePath: "",

        activityUrl: "",

        activityStatus: null,

        activityName: "",

        bgColor: "",

        bgImage: "",

        buttonDisabledImage: "",

        buttonImage: "",

        createTime: "",

        creater: "",

        endTime: "",

        explainImage: "",

        id: null,

        receiveLimit: null,

        startTime: "",

        status: null,

        titleImage: "",

        updateTime: "",

        updater: ""
      },

      rules: {
        activityName: [
          { required: true, message: "请输入活动名称", trigger: "blur" }
        ],

        receiveLimit: [
          { required: true, message: "请输入领取次数", trigger: "blur" }
        ],

        startTime: [
          {
            required: true,

            message: "请选择时间",

            trigger: "change"
          }
        ],

        endTime: [
          {
            required: true,

            message: "请选择时间",

            trigger: "change"
          }
        ]
      },

      activityNo: "",

      dialogVisible: false,

      isChannelEject: false,

      Data: [],

      ArrData: [],

      producList: [],
      len: 0,

      isLoading: false,

      text: "",

      couponNo: "",

      number: 1,

      isSelect: 0,

      pageIndex: 1,

      pageSize: 2,

      activityBlo: false,

      total: 0,

      Channelid: "",

      uuid: "",

      channelRefList: []
    };
  },

  activated() {
    this.activityNo = this.$route.query.activityNo || "";

    this.activityBlo = this.activityNo == "" ? false : true;

    if (this.activityNo != "") {
      this.infoActivity();
    } else {
      this.ruleForm = {};

      this.channelRefList = [];

      this.ArrData = [];
    }
  },

  methods: {
    copy(data) {
      // 活动编号复制
      let clipboard = new Clipboard(".tag", {
        text: function() {
          return data;
        }
      });
      clipboard.on("success", e => {
        this.$message({
          message: "复制成功",
          showClose: true,
          type: "success"
        });
        // 释放内存
        clipboard.destroy();
      });
    },
    isClick() {
      this.dialogVisible = true;

      this.DetailByPage();
    },

    // 渠道名称搜索

    isBatchAdd(val) {
      this.formInline.region = val || "";

      this.DetailByPage();
    },

    isDialog(type, data, index) {
      console.log(data, index);

      this.msg = type;

      this.editIndex = index;

      if (data !== undefined && type == "修改渠道名称") {
        this.DetailByPage();

        this.ChannelCogin.channelName = data.channelName;

        this.Channelid = data.id;

        this.uuid = data.uuid;
      } else {
        this.ChannelCogin = {};
      }

      this.isChannelEject = true;
    },

    publicFunction() {
      if (this.msg == "修改渠道名称") {
        this.channelRefList.forEach(todo => {
          if (todo.uuid != this.uuid) {
            if (todo.channelName == this.ChannelCogin.channelName) {
              this.$message.error("渠道名称不能相同！");

              return;
            }
          } else if (todo.uuid == this.uuid) {
            todo.channelName = this.ChannelCogin.channelName;
          }
        });
      } else if (this.msg == "新增渠道名称") {
        if (!this.ChannelCogin.channelName) {
          this.$message.error("渠道名称不能为空！");
        } else if (this.channelRefList.length > 0) {
          const len = this.channelRefList.filter(
            todo => todo.channelName == this.ChannelCogin.channelName
          );

          if (len.length > 0) {
            this.$message.error("渠道名称不能相同");
          } else {
            this.channelRefList.push({
              activePath: "",

              activityNo: "",

              channelCode: "",

              channelName: this.ChannelCogin.channelName,

              createTime: "",

              creater: "",

              id: "",

              uuid: uuidv4(),

              status: 1,

              updateTime: "",

              updater: ""
            });
          }
        } else {
          this.channelRefList.push({
            activePath: "",

            activityNo: "",

            channelCode: "",

            channelName: this.ChannelCogin.channelName,

            createTime: "",

            creater: "",

            id: "",

            uuid: uuidv4(),

            status: 1,

            updateTime: "",

            updater: ""
          });

          console.log(",channelRefData", this.channelRefList);
        }
      }
    },

    UpdatepublicFunction() {
      if (this.msg == "修改渠道名称") {
        this.channelRefList.forEach(todo => {
          if (todo.uuid != this.uuid) {
            if (todo.channelName == this.ChannelCogin.channelName) {
              this.$message.error("渠道名称不能相同！");

              todo.channelName = todo.channelName;

              return;
            }
          } else if (todo.id == this.Channelid) {
            todo.channelName = this.ChannelCogin.channelName;
          }
        });
      } else if (this.msg == "新增渠道名称") {
        if (!this.ChannelCogin.channelName) {
          this.$message.error("渠道名称不能为空！");
        } else if (this.channelRefList.length > 0) {
          const len = this.channelRefList.filter(
            todo => todo.channelName == this.ChannelCogin.channelName
          );

          if (len.length > 0) {
            this.$message.error("渠道名称不能相同");
          } else {
            this.channelRefList.push({
              activePath: "",

              activityNo: "",

              channelCode: "",

              channelName: this.ChannelCogin.channelName,

              createTime: "",

              creater: "",

              id: "",

              uuid: uuidv4(),

              status: 1,

              updateTime: "",

              updater: ""
            });
          }
        } else {
          this.channelRefList.push({
            activePath: "",

            activityNo: "",

            channelCode: "",

            channelName: this.ChannelCogin.channelName,

            createTime: "",

            creater: "",

            id: "",

            uuid: uuidv4(),

            status: 1,

            updateTime: "",

            updater: ""
          });

          console.log(",channelRefData", this.channelRefList);
        }
      }
    },

    onSubmitChannel() {
      if (this.activityBlo) {
        this.UpdatepublicFunction();

        console.log(`activityBlo,,,,修改,,`, this.activityBlo);
      } else {
        this.publicFunction();

        console.log(`activityBlo,,,,兴建,,`, this.activityBlo);
      }

      this.isChannelEject = false;
    },

    // 修改渠道名称

    UpdateChannelName(val) {
      console.log("val,,修改,,,,,", val);

      this.ChannelCogin.name = val || "";

      this.DetailByPage();
    },

    isCancel() {
      this.$router.push({
        path: "/getHomeActivity"
      });
    },

    // 保存选中的数据id,row-key就是要指定一个key标识这一行的数据

    getRowKey(row) {
      console.log("row.id,,,,", row.id);

      // return row.id;
    },

    // 清空选择的值

    clearSelect() {
      this.$refs.buyerTable.clearSelection();
    },

    change(index) {
      //console.log("index,,,,,,", index);

      this.number = index; //重要处

      this.ruleFormData.sendUserType = index;
    },

    handleChange(value) {
      //console.log(value);

      this.ruleForm.receiveLimit = value;
    },

    //删除列表指定项

    deleteRow(couponNo) {
      console.log("  couponNo,,,", couponNo);
      this.ArrData = this.ArrData.filter(item => item.couponNo !== couponNo);
    },

    //分页获取优惠券模板列表接口调用

    DetailByPage() {
      this.$http({
        url: "/couponadmin/v1/couponTemplate/getValidCouponTemplates",

        method: "GET",

        params: {
          pageNum: this.pageIndex,

          pageSize: this.pageSize
        }
      }).then(res => {
        this.producList = res.data.list;

        this.total = parseInt(res.data.total);
      });
    },

    //活动详情接口调用

    infoActivity() {
      this.$http({
        url: "/activityadmin/activity/detail",

        method: "GET",

        params: {
          activityNo: this.activityNo
        }
      }).then(res => {
        this.ruleForm = res.data.activityInfo;

        this.channelRefList = res.data.channelRefList;

        this.channelRefList = res.data.channelRefList;

        this.ArrData = res.data.couponRefList;
      });
    },

    //活动图片

    handleAvatarSuccess(res) {
      this.ruleForm.bgImage = Object.keys(res).toString();

      this.DetailByPage();
    },

    //按钮图片(未领取)图片

    handleAvatarSuccess1(res) {
      this.ruleForm.buttonDisabledImage = Object.keys(res).toString();

      this.DetailByPage();
    },

    //按钮图片(领取)图片

    handleAvatarSuccess2(res) {
      this.ruleForm.buttonImage = Object.keys(res).toString();

      this.DetailByPage();
    },

    //活动图片

    handleAvatarSuccess3(res) {
      this.ruleForm.explainImage = Object.keys(res).toString();

      this.DetailByPage();
    },

    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/jpg" ||
        file.type === "image/png";

      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只支持JPG/JPEG/png格式");
      }

      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }

      return isJPG && isLt2M;
    },

    // 每页数

    sizeChangeHandle(val) {
      this.pageSize = val;

      this.pageIndex = 1;

      this.DetailByPage();
    },

    // 当前页

    currentChangeHandle(val) {
      this.pageIndex = val;

      this.DetailByPage();
    },

    //发布

    isRelease(ruleForm) {
      let channelList = JSON.parse(JSON.stringify(this.channelRefList)); //复制(深拷贝)

      channelList.length > 0 &&
        channelList.forEach(item => (item.activePath = ""));

      let endTimeFormat = moment(this.ruleForm.endTime).format(
        "YYYY-MM-DD HH:mm:ss"
      );

      let startTimeFormat = moment(this.ruleForm.startTime).format(
        "YYYY-MM-DD HH:mm:ss"
      );

      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          console.log("index,,,说的是,,,", this.ruleForm);

          const couponRefList = [];

          this.ArrData.forEach(item => {
            let itemData = {
              activityNo: this.activityNo,

              couponNo: item.couponNo,

              couponTitle: item.couponTitle,

              createTime: item.createTime,

              creater: item.creater,

              description: item.description,

              discountAmount: item.discountAmount,

              effectiveEndTime: item.effectiveEndTime,

              effectiveStartTime: item.effectiveStartTime,

              id: item.id,

              sendQuantity: item.sendQuantity,

              status: item.status,

              thresholdAmount: item.thresholdAmount,

              updateTime: item.updateTime,

              updater: item.updater,

              useConditions: item.useConditions
            };

            couponRefList.push(itemData);
          });

          this.$http({
            url: "/activityadmin/activity/edit",

            method: "POST",

            data: {
              activityInfo: {
                activityNo: this.activityNo,

                activityUrl: this.ruleForm.activityUrl,

                activityStatus: this.ruleForm.activityStatus,

                activityName: this.ruleForm.activityName,

                bgColor: this.ruleForm.bgColor || "#000000",

                bgImage:
                  this.ruleForm.bgImage ||
                  "https://golte-platform.oss-cn-shanghai.aliyuncs.com/avatar/8b97ac276b9949989ee77bf2bed4830e外部2@3x.png",

                buttonDisabledImage:
                  this.ruleForm.buttonDisabledImage ||
                  "https://golte-platform.oss-cn-shanghai.aliyuncs.com/avatar/8b97ac276b9949989ee77bf2bed4830e外部2@3x.png",

                buttonImage:
                  this.ruleForm.buttonImage ||
                  "https://golte-platform.oss-cn-shanghai.aliyuncs.com/avatar/8b97ac276b9949989ee77bf2bed4830e外部2@3x.png",

                titleImage:
                  this.ruleForm.titleImage ||
                  "https://golte-platform.oss-cn-shanghai.aliyuncs.com/avatar/8b97ac276b9949989ee77bf2bed4830e外部2@3x.png",

                createTime: this.ruleForm.createTime,

                creater: this.ruleForm.creater,

                endTime: this.ruleForm.endTime ? endTimeFormat : "",

                startTime: this.ruleForm.startTime ? startTimeFormat : "",

                explainImage:
                  this.ruleForm.explainImage ||
                  "https://golte-platform.oss-cn-shanghai.aliyuncs.com/avatar/8b97ac276b9949989ee77bf2bed4830e外部2@3x.png",

                id: this.ruleForm.id,

                receiveLimit: this.ruleForm.receiveLimit,

                status: this.ruleForm.status,

                updateTime: this.ruleForm.updateTime,

                updater: this.ruleForm.updater
              },

              couponRefList,

              channelRefList: channelList,

              memberNo: ""
            }
          })

            .then(res => {
              if (res.success == 1) {
                this.$message.success("发布成功");

                this.isCancel();
              } else {
                this.$message.error(res.errorMsg);
              }
            })

            .catch(err => {
              this.$message.error("发布失败");
            });
        } else {
          return false;
        }
      });
    },

    onSubmit() {
      this.isLoading = true;
    },

    // 优惠券多选数据

    handleSelectionChange(val) {
      console.log(`优惠券多选数据`, val);

      this.Data = val;

      this.len = this.Data.length;
    },

    onSubmitData() {
      if (this.Data.length == 0) {
        this.$message.error("至少选择一项");
      } else {
        const aa = this.Data.concat(this.ArrData);
        let temp = {}; //用于couponNo判断重复
        let result = []; //最后的新数组
        //遍历c数组，将每个item.couponNo在temp中是否存在值做判断，
        aa.map((item, index) => {
          if (!temp[item.couponNo]) {
            result.push(item);
            temp[item.couponNo] = true;
          }
        });
        console.log(result);
        this.ArrData = result;
        this.dialogVisible = false;
      }
    }
  },

  beforeRouteLeave(to, from, next) {
    this.reload();

    next();
  }
};
</script>

<style scoped lang="scss">
.block {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 10px 0 10px;
}
.left {
  font-size: 15px;
}
.hide .el-upload--picture-card {
  display: none;
}

/deep/ .el-upload {
  border: 1px dashed #999999;
}

.avatar-uploader .el-upload {
  border-radius: 6px;

  cursor: pointer;

  position: relative;

  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;

  color: #8c939d;

  width: 120px;

  height: 120px;

  line-height: 128px;

  text-align: center;
}

.avatar {
  width: 108px;

  height: 108px;

  display: block;
}

.avatar1 {
  width: 38px;

  height: 38px;

  display: block;
}

.hander {
  width: 100%;

  height: 50px;

  line-height: 50px;

  font-size: 20px;

  font-weight: 900;
}

.herdertop {
  height: 8vh;

  display: flex;

  align-items: center;

  padding: 0 20px;

  box-sizing: border-box;
}

.topImg {
  margin-right: 20px;
}

.entirety {
  width: 95%;

  margin-left: 10px;

  border: 7px solid #fafafa;

  border-radius: 10px;

  .basic {
    font-size: 18px;

    font-weight: 900;

    margin-top: 2%;

    margin-bottom: 1%;

    margin-left: 1%;
  }
}

.overall {
  width: 100%;

  height: auto;

  display: flex;

  justify-content: space-between;

  margin-top: 3%;

  .left {
    width: 20%;

    height: auto;
  }

  .right {
    width: 80%;

    height: auto;
  }
}

.select {
  width: 65%;

  height: auto;

  display: flex;

  justify-content: space-between;

  align-items: center;

  .dialog-footer,
  .choice {
    margin-left: 2%;
  }
}

.selects {
  width: 55%;

  height: auto;

  display: flex;

  justify-content: space-between;

  align-items: center;

  .dialog-footer,
  .choice {
    margin-left: 2%;
  }
}

/deep/ .but {
  background: #fd7097;

  color: #fff;

  margin-bottom: 1%;
}

/deep/ .el-form {
  .el-form-item {
    padding-bottom: 13px;

    margin-bottom: 0;
  }

  .one {
    display: flex;

    align-items: center;

    .name {
      .el-form-item__content {
        width: 300px;
      }
    }

    .staffCode {
      margin-left: 20px;

      .el-form-item__content {
        display: flex;

        align-items: center;

        width: 260px;

        .copy {
          margin-left: 10px;

          height: 32px;

          display: flex;

          align-items: center;
        }
      }
    }
  }

  .phone {
    .el-form-item__content {
      width: 300px;
    }
  }

  .area {
    .el-select {
      width: 150px;
    }
  }

  .date {
    .el-form-item__content {
      height: 30px;

      width: 300px;

      .el-date-editor {
        height: 30px;

        width: 300px;

        .el-input__inner {
          height: 30px;
        }
      }
    }
  }
}

/deep/ .el-row {
  display: flex;

  width: 810px;
}

/deep/ .el-col-11 {
  width: 210px;
}

.tag {
  margin-left: 8px;

  height: 38px;
}

.bag {
  text-align: center;

  margin-right: -8px;
}
</style>

<style lang="scss" scoped>
/deep/ .buttonimg {
  height: 44px;

  .el-upload {
    width: 160px;

    height: 44px;
  }

  .avatar-uploader-icon {
    width: 160px;

    height: 44px;

    display: flex;

    justify-content: center;

    align-items: center;
  }

  .avatar {
    width: 160px;

    height: 44px;
  }
}
</style>
<style lang="scss" scoped>
/deep/ .el-table__body{
  width: 100%!important;
}
</style>
